<template>
	<view class="warp">
		<!-- 顶部 start -->
		<!-- #ifdef WEB -->
		<view class="navbar_top">
			<uv-navbar leftText="返回" :fixed="false" title="信息列表" border :safeAreaInsetTop="false" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="arrow-left" size="19"></uv-icon>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot">
						<uv-icon name="home" size="19"></uv-icon>
					</view>
				</template>
			</uv-navbar>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uv-navbar leftText="返回" :fixed="true" title="信息列表" border :safeAreaInsetTop="true" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
				</view>
			</template>
			<template v-slot:right>
				<view class="uv-nav-slot">
					<uv-icon name="home" size="19"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<!-- #endif -->
		<!-- 顶部 end -->
		<uv-tabs :list="category" @click="click"></uv-tabs>
		<!-- 列表 start -->
		<view class="article_list">
			<view class="article_item" v-for="(v,k) in rows" :key="k" @click="jumpUrl('/pages/article/details?id='+v.id)">
				<view class="article_l">
					<image :src="v.image" mode="aspectFill"></image>
				</view>
				<view class="article_r">
					<view class="title line_2">
						{{v.title}}
					</view>
					<view class="time">
						{{v.createtime_text}}
					</view>
				</view>
			</view>
			<uv-load-more :status="apiStatus" />
		</view>
		<!-- 列表 end -->
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="1000"></bastTabbar>
		<!-- 底部tabbar end -->
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" z-index="1000" top="200"></uv-back-top>
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	export default {
		components: {
			bastTabbar,
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		onReachBottom() {
			console.log('onReachBottom')
			this.getList()
		},
		onLoad() {
			this.getCategory()
			this.getList()
		},
		data() {
			return {
				scrollTop: 0,
				category: [],
				category_id: 0,
				rows: [],
				//
				page: 1,
				pagesize: 10,
				apiMore: true,
				apiStatus: 'loadmore',
				apiPost: false,
			}
		},
		methods: {
			click(item) {
				this.rows = []
				this.page = 1
				this.apiMore = true
				this.apiStatus = 'loadmore'
				this.apiPost = false
				this.category_id = item.id
				this.getList()
			},
			async getCategory() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "article/category",
					type: "post",
					data: {},
				});
				if(res.code){
					this.category = res.data
				}
			},
			async getList() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "article/articleList",
					type: "post",
					data: {category_id:this.category_id,pagesize:this.pagesize,page:this.page}
				});
				this.page += 1
				if(res.code){
					this.apiMore = res.data.length < this.pagesize ? false : true
					this.apiStatus = res.data.length < this.pagesize ? "nomore" : "loadmore"
					this.rows = this.rows.length > 0 ? [...this.rows, ...res.data] : res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					this.apiMore = false
					this.apiStatus = 'nomore'
				}
			},

		}
	}
</script>

<style lang="scss">
	.warp{
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		.article_list{
			padding: 20rpx;
			.article_item{
				display: flex;
				border-bottom: 1px dashed #ccc;
				padding-bottom: 20rpx;
				margin-top: 20rpx;
				.article_l{
					margin-right: 20rpx;
					image{
						width: 240rpx;
						height: 160rpx;
						border-radius: 6rpx;
						border: 1px;
					}
				}
				.article_r{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title{
						color: #333;
						font-size: 32rpx;
					}
					.time{
						color: #999;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>